<template>
  <div id="detail">
  <div class="nav-btn"><detail-nav-bar 
  @titleClick="titleClick"
  ref="nav"></detail-nav-bar></div>
  <scroll class="content1" ref="scroll" @scroll="contentScroll" :probe-type="3">
   <detail-swipter :topimages='topimages'></detail-swipter>
   <detail-base-info :goods="goods"/>
   <detail-shop-info :shop="shop"/>
   <detail-goods-info :detailInfo="detailInfo" @imageLoad="imageLoad"/>
   <detail-param-info  ref="params" :paramInfo="paramInfo"/>
   <detail-params-info :itemParams="itemParams"/>
   <detail-comment-info ref="comment" :commentInfo="commentInfo" :usercommemt="usercommemt"/>
   <goods-list ref="recommend" :goods="recommends"/>
   
  </scroll>
  <back-top  v-show="isShowBackTop" @click.native="backclick"></back-top>
  <detail-buttom-bar/>
  </div>
</template>

<script>
import DetailNavBar from './childComponents/DetailNavBar'
import DetailSwipter from './childComponents/DetailSwipter'
import DetailBaseInfo from './childComponents/DetailBaseInfo'
import DetailShopInfo from './childComponents/DetailShopInfo'
import DetailGoodsInfo from './childComponents/DetailGoodsInfo'
import DetailParamInfo from './childComponents/DetailParamInfo'
import DetailParamsInfo from './childComponents/DetailParamsInfo'
import DetailCommentInfo from './childComponents/DetailCommentInfo'
import GoodsList from '../../components/content/goods/GoodsList'
import DetailButtomBar from './childComponents/DetailButtonBar'
import BackTop from '@/components/content/backTop/BackTop'

import scroll from '@/components/common/scoll/Scoll.vue'


import {getDetail,Goods,Shop,GoodsParam,getRecomment} from '@/network/detail.js'
export default {
    name :"Detail",
    data() {
        return {
            iid:null,
            topimages:[],
            usercommemt:{},
            goods:{},
            shop:{},
            detailInfo:{},
            paramInfo:{},
            itemParams:{},
            commentInfo:{},
            recommends:[],
            themeTopYs:[],
            currentIndex:0,
            isShowBackTop:false
        }
    },
    created() {
        this.lld = this.$route.params.iid
        //请求推荐数据
        getRecomment().then(res=>{
           this.recommends = res.data.list
        })
         //请求详情数据
        getDetail(this.lld).then(res=>{
         
            // 获取轮播图信息
            this.topimages = res.result.itemInfo.topImages
            // 获取商品信息
            this.goods = new Goods(res.result.itemInfo,res.result.columns,res.result.shopInfo.services)
            //保存店铺信息
            this.shop = new Shop(res.result.shopInfo)
            //保存商品的详细信息
            this.detailInfo = res.result.detailInfo
            this.paramInfo = new GoodsParam(res.result.itemParams.info,res.result.itemParams.rule)
            if(res.result.rate.cRate !== 0){
                this.commentInfo = res.result.rate.list[0]
                this.usercommemt = this.commentInfo.user
               
            }
            this.themeTopYs=[]
                this.themeTopYs.push(0)
                this.themeTopYs.push(this.$refs.params.$el.offsetTop)
                this.themeTopYs.push(this.$refs.comment.$el.offsetTop)
                this.themeTopYs.push(this.$refs.recommend.$el.offsetTop)
            this.$nextTick(()=>{
                this.themeTopYs=[]
                this.themeTopYs.push(0)
                this.themeTopYs.push(this.$refs.params.$el.offsetTop-44)
                this.themeTopYs.push(this.$refs.comment.$el.offsetTop-44)
                this.themeTopYs.push(this.$refs.recommend.$el.offsetTop-44)
            })
        })

    },
    methods: {
        imageLoad(){
            this.$refs.scroll.refresh()
             this.themeTopYs=[]
                this.themeTopYs.push(0)
                this.themeTopYs.push(this.$refs.params.$el.offsetTop-44)
                this.themeTopYs.push(this.$refs.comment.$el.offsetTop-44)
                this.themeTopYs.push(this.$refs.recommend.$el.offsetTop-44)
        },
        titleClick(index){
            this.$refs.scroll.scrollTo(0,-this.themeTopYs[index],500)
            
        },
        contentScroll(position){
           
         const positionY = -position.y
         let length =  this.themeTopYs.length
         for(let i = 0; i < length;i++){
            if(this.currentIndex!=i && ((i<length-1 && positionY>=this.themeTopYs[i] && positionY<this.themeTopYs[i+1])
            || (i== length-1 && positionY>=this.themeTopYs[i])) ){
                this.currentIndex = i                              
                this.$refs.nav.currentindex = this.currentIndex           
            }
             
         }
          
            this.isShowBackTop = position.y< -1000?true:false
            
        },
        backclick(){   
        this.$refs.scroll.scrollTo(0,0,1000) 
      },
        
    },
    components:{
        DetailNavBar,
        DetailSwipter,
        DetailBaseInfo,
        DetailShopInfo,
        scroll,
        DetailGoodsInfo,
        DetailParamInfo,
        DetailParamsInfo,
        DetailCommentInfo,
        GoodsList,
        DetailButtomBar,
        BackTop
    }
}
</script>

<style scoped>
#detail{
    position: relative;
    z-index: 99;
    background-color: #fff;
    height: 100vh;
}
 .nav-btn{
    position: relative;
    z-index: 999;
    background-color: #fff;
}
.content1{
   height: calc(100% - 44px - 49px);
}
</style>